<template>
	<view class="add">
		<view class="zai-box">
		<image src="http://119.29.2.163:9000/xiaomayi/img/touxiang/xiaomayi.png" mode='aspectFit' class="zai-logo"></image>
		<view class="zai-form">
			<input class="zai-input" maxlength="11" v-model="account" placeholder="请输入手机号" />
			<input class="zai-input" v-model="password" password placeholder="请输入密码" />
			<navigator url="/pages/7_Login2Page/Loging2Page" hover-class="none" class="zai-label">忘记密码？</navigator>
			<button class="zai-btn" @click="login()">立即登录</button>
			<navigator url="/pages/8_ZhucePage/ZhucePage" hover-class="none" class="zai-label">还没有账号？点此注册.</navigator>
		</view>
		</view>	
	</view>
</template>

<script>
	// import setting from '../../common/setting.js'
	export default {
		data() {
			return {
				account: '',
				password: ''
			}
		},
		// onLoad(){
		// 	if(!store.state.hasLogin){
		// 		uni.showToast({
		// 			icon: 'none',
		// 			title: '请登录'
		// 		});
		// 	}
		// },

		methods: {
			login() {
				var re = /^[0-9]*$/

				if ((this.account.length != 11) || (!re.test(this.account))) {
					uni.showToast({
						icon: 'none',
						title: '请正确输入11位账号'
					});
					return;
				} else if (this.password.length < 4) {
					uni.showToast({
						icon: 'none',
						title: '密码最短为 4 个字符'
					});
					return;
				} else {
					var that = this;
					uni.request({
						method: 'POST',
						url: 'http://localhost/getUserInfo',
						data: {
							account: that.account,
							password: that.password,
						},
						success(res) {
							console.log(res)
							if (res.statusCode == 200) {

								if (res.data == "" || res.data == null) {
									uni.showToast({
										icon: 'none',
										title: '账号或密码错误'
									})
								} else {
									uni.setStorage({
										key: 'user',
										data: res.data
									})
									
									uni.showToast({
										icon: 'none',
										title: '登录成功'
									})
									setTimeout(()=>{
										uni.reLaunch({
											url: '/pages/5_UserPage/5_UserPage'
										})
									},1500);
								}

							} else {
								uni.showToast({
									icon: 'none',
									title: '网络错误'
								})
							}
						}
					})
				}

			}
		},
	}
</script>

<style>
	.add{
		background: linear-gradient(200deg, #ecf5ff, #fdf6ec);
		width: 100vw;
		height: 100vh;
	}
	.zai-box{
			padding: 0 100upx;
			position: relative;
		}
		.zai-logo{
			margin-top: 100upx;
			width: 100%;
			width: 100%;
			height: 100px;
		}
		.zai-title{
			position: absolute;
			top: 0;
			line-height: 360upx;
			font-size: 68upx;
			color: #fff;
			text-align: center;
			width: 100%;
			margin-left: -100upx;
		}
		.zai-form{
			margin-top: 200upx;
		}
		.zai-input{
			background: #e2f5fc;
			margin-top: 30upx;
			border-radius: 100upx;
			padding: 20upx 40upx;
			font-size: 36upx;
		}
		.input-placeholder, .zai-input{
			color: #94afce;
		}
		.zai-label{
			padding: 60upx 0;
			text-align: center;
			font-size: 30upx;
			color: #a7b6d0;
		}
		.zai-btn{
			background: #ff65a3;
			color: #fff;
			border: 0;
			border-radius: 100upx;
			font-size: 36upx;
		}
		.zai-btn:after{
			border: 0;
		}
		/*按钮点击效果*/
		.zai-btn.button-hover{
			transform: translate(1upx, 1upx);
		}
</style>